<template>
    <div class='navcon-container' style="margin-top: 0px;">
        <div class="head-container">

            <div class="location-show">
                <span class="location ">
                    <i class="el-icon-location"></i>
                    {{ memberVo.city }}
                </span>
                <!-- <div class="more-city">
                    sdf
                </div> -->
            </div>
            <ul>
                <li><span @click="goIndex()">首页</span></li>
                <li class="member-more" v-if="loginValidate">
                    <span class="member-acount">{{ memberVo.nickname }}</span>
                    <div class="member-info">
                        <img :src="memberVo.header" alt="" @click="goMyInfo()">
                        <div class="level" @click="goMyInfo()">
                            {{ memberVo.level }}
                        </div>
                        <div @click="loginOut()" class="login-out">
                            退&nbsp;出
                        </div>
                    </div>
                </li>
                <li v-if="!loginValidate"><span id="toLogin" @click="toLogin">你好,请登录</span></li>
                <li v-if="!loginValidate"><span id="toRegister" @click="toRegister" style="color: #f30213; ">立即注册</span>
                </li>
                <li><span id="addProduct" @click="addProduct()">发布商品</span></li>
                <li><span id="myOrder" @click="myOrder">我的订单</span></li>
                <li><span id="myInfo" @click="myInfo">
                        我的信息
                        <div class="myInfo-tip" v-if="messagingCount > 0 && isMembersettingPage">{{ messagingCount }}</div>
                    </span>
                </li>
                <li><span id="myFoot" @click="myInterest">我的关注</span></li>

                <li><span id="myCart" @click="navigation"><i class="el-icon-star-on"></i> 收藏夹</span></li>
                <li><span v-if="loginValidate" id="loginOut" @click="loginOut">退出</span></li>
            </ul>
        </div>
    </div>
</template>
<script>

var webSocket = null;

import getUUID from '../utils/uuid';
// 导出模块
export default {
    // 模块名字
    name: 'navcon',
    // 模块数据
    data() {
        //数据
        return {
            // 默认未登录
            loginValidate: false,
            account: "",
            memberVo: [],
            url: null,
            messagingCount: 0,   // 未读站内信条数
            messagingList: [],   // 未读站内信数据
            isMembersettingPage: true,

        };
    },
    // 注册组件
    components: {
    },
    // 监听指定值，只有指定值变化，才会触发
    watch: {},
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {

        goIndex() {
            let urls = window.location.href;
            let first_index_str = urls.substring(urls.indexOf(':') + 1, urls.length);
            let second_index = first_index_str.substring(first_index_str.indexOf(':') + 1, first_index_str.length);
            let api_begin = second_index.substring(second_index.indexOf("/"), second_index.length)
            if (api_begin.length == 1) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/' })
        },


        goMyInfo() {
            if (window.location.href.includes("/member/membersetting/securitysetting")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/membersetting/securitysetting' })
        },

        toLogin() {
            if (window.location.href.includes("/member/login")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/login' })
        },


        toRegister() {
            if (window.location.href.includes("/member/register")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/register' })
        },


        loginOut() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/member/loginOut/${this.memberVo.id}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.loginValidate = false;
                    this.memberVo.city = "贵阳"
                    this.$router.go(0)
                }
            })
        },


        myOrder() {
            if (window.location.href.includes("/member/accountsetting/orderlist")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/accountsetting/orderlist' })
        },


        addProduct() {
            if (window.location.href.includes("/member/membersetting/addproduct")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/membersetting/addproduct' })
        },

        myInterest() {
            if (window.location.href.includes('/member/accountsetting/interest')) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/accountsetting/interest', query: { params: getUUID() } })
        },


        myInfo() {
            if (window.location.href.includes("/member/membersetting/securitysetting")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/membersetting/securitysetting' })
        },


        navigation() {
            if (window.location.href.includes("/member/collect")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/collect' })
        },

        aboutMe() {
            if (window.location.href.includes("/aboutme")) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/aboutme' })
        },


        /**
         * 获取未读站内行条数
         */
        getMessagingCount() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberexchange/messagingCount?memberId=${this.memberVo.id}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.messagingCount = data.data
                }
            })
        },

    },

    async created() {

        let member = await this.$memberInfo()
        if (member != null) {
            this.loginValidate = true
            this.memberVo = member;
            this.url = this.url = `ws:${window.SITE_CONFIG.baseUrl.substring(5)}/shitou-member/shitou/messaging/${this.memberVo.id}`
            webSocket = new WebSocket(this.url);
            this.getMessagingCount()

            let this_ = this
            // 发送消息过来时，重新获取总数
            webSocket.onmessage = function (event) {
                if (!window.location.href.includes("/member/membersetting/messaging")) {
                    this_.$message({
                        type: 'success',
                        message: '您收到了一份系统消息'
                    })
                    console.log("SDFSDF")
                }

                this_.getMessagingCount()
            };

        } else {
            this.loginValidate = false
            this.memberVo.city = "贵阳"
        }

        if (window.location.href.includes("/member/membersetting/messaging")) {
            this.isMembersettingPage = false
            console.log(this.isMembersettingPage)
        }


    },

};
</script>


<style scoped>
@import url("../utils/css/navcon.css");
</style>

